<template>
  <div>
    <div
      class="ai-assistant"
      :style="assistantStyle"
      @mousedown="startDrag"
      @click="handleClick"
      ref="assistant"
    >
      <img :src="imageUrl" alt="加载失败" draggable="false" />
    </div>
    <TalkAI :show.sync="showTalk"></TalkAI>
  </div>
</template>

<script>
import TalkAI from '../TalkAI/TalkAI'
import Cookies from 'js-cookie'
export default {
  name: 'SmartAITalk',
  components: {
    TalkAI
  },
  data() {
    return {
      imageUrl:require('@/assets/images/AI_smart_icon.png'),
      position: { x: 0, y: 0 }, // 初始位置将在mounted中计算
      isDragging: false,
      dragStart: { x: 0, y: 0 },
      startPos: { x: 0, y: 0 },
      hasMoved: false,
      showTalk: false
    }
  },
  watch: {
    position:{
      handler(newValue) {
        Cookies.set('aiPosition', JSON.stringify(newValue))
      },
      deep: true
    }
  },
  computed: {
    assistantStyle() {
      return {
        left: `${this.position.x}px`,  // 改为left
        bottom: `${this.position.y}px`, // 保持bottom
        cursor: this.isDragging ? 'grabbing' : 'grab'
      }
    }
  },
  mounted() {
    // 设置初始位置为右下角，距离右边和底部各20px
    this.setInitialPosition();
    let aipPosition = Cookies.get('aiPosition')
    if (aipPosition){
      this.position = JSON.parse(aipPosition)
    }
    window.addEventListener('mousemove', this.onDrag);
    window.addEventListener('mouseup', this.stopDrag);
    window.addEventListener('resize', this.setInitialPosition);
  },
  beforeDestroy() {
    window.removeEventListener('mousemove', this.onDrag);
    window.removeEventListener('mouseup', this.stopDrag);
    window.removeEventListener('resize', this.setInitialPosition);
  },
  methods: {
    setInitialPosition() {
      this.position = {
        x: 20, // 距离左边20px（因为使用right定位，所以小值=靠左）
        y: 20  // 距离底部20px
      };
      this.startPos = { ...this.position };
    },
    startDrag(e) {
      this.isDragging = true;
      this.hasMoved = false;
      this.dragStart = {
        x: e.clientX,
        y: e.clientY
      };
      this.startPos = {
        x: this.position.x,
        y: this.position.y
      };
      e.preventDefault();
    },
    onDrag(e) {
      if (!this.isDragging) return;

      const dx = e.clientX - this.dragStart.x;
      const dy = e.clientY - this.dragStart.y;

      if (Math.abs(dx) > 5 || Math.abs(dy) > 5) {
        this.hasMoved = true;
      }

      let newX = this.startPos.x + dx; // 改为加号，因为现在使用left定位
      let newY = this.startPos.y - dy;

      const assistant = this.$refs.assistant;
      const maxX = window.innerWidth - assistant.offsetWidth - 20;
      const maxY = window.innerHeight - assistant.offsetHeight - 20;

      newX = Math.max(20, Math.min(newX, maxX));
      newY = Math.max(20, Math.min(newY, maxY));

      this.position = { x: newX, y: newY };
    },
    stopDrag() {
      if (this.isDragging) {
        this.isDragging = false;
      }
    },
    handleClick() {
      if (this.isDragging || this.hasMoved) {
        this.hasMoved = false;
        return;
      }
      this.showTalk = !this.showTalk;
    }
  }
}
</script>

<style scoped>
.ai-assistant {
  position: fixed;
  width: 8vh;
  height: 8vh;
  z-index: 9999;
  user-select: none;
  transition: transform 0.1s ease;
}

.ai-assistant img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.ai-assistant:active {
  transform: scale(0.95);
}
</style>
